<template>
    <button @click="toggle" :class="{'wheel-checked': value}" class="wheel-switch">
        <span class="wheel-switch-circle"></span>
    </button>
</template>

<script lang="ts">

    import { ref } from 'vue'

    export default {
        props: {
            value: Boolean
        },
        setup(props, context) {
            const toggle = () => {
                context.emit('update:value', !props.value);  // emit(事件名, 事件参数)
            }
            return { toggle };
        }
    }
</script>

<style lang="scss">
    $h: 22px;
    $h2: $h - 4px;

    .wheel-switch {
        position: relative;
        height: $h;
        width: $h * 2;
        border-radius: $h/2;
        border: none;
        background: #BFBFBF;

        > .wheel-switch-circle {
            position: absolute;
            top: 2px;
            left: 2px;
            height: $h2;
            width: $h2;
            border-radius: $h2 / 2;
            background: #FFF;
            transition: all 250ms;
        }

        &.wheel-checked {
            background: #1890FF;
        }

        &.wheel-checked > span {
            left: calc(100% - #{$h2} - 2px);
        }

        &:focus {
            outline: none;
        }

        &:active {
            > .wheel-switch-circle {
                width: $h2 + 4px;
            }
        }

        &.wheel-checked:active {
            > .wheel-switch-circle {
                width: $h2 + 4px;
                margin-left: -4px;
            }
        }
    }
</style>